<template>
  <div id="reg">
    <div class="reg">
      <group title="" class="weui-cells_form">
        <x-input v-model="formItem.phone" type="tel" title="手机号" class="weui-vcode" placeholder="请输入注册时的手机号码" :max="11" :show-clear="false">
          <x-button :disabled="disabled" slot="right" type="primary" mini @click.native="sendCode">{{codebtn}}</x-button>
        </x-input>
        <x-input v-model="formItem.code" type="tel" title="验证码" class="weui-vcode" placeholder="请输入短信验证码" :max="4"></x-input>
        <x-input v-model="formItem.password" type="password" title="新密码" class="weui-vcode" placeholder="请输入密码(6~16位)" :max="16" :min="6"></x-input>
      </group>
    </div>
    <div style="margin: 0.3rem 0.2rem 0.2rem 0.2rem">
      <x-button type="primary" :show-loading="loading" action-type="button" @click.native="handleReg">{{btn}}</x-button>
    </div>
  </div>
</template>
<script>
import PubHeader from '../components/PubHeader.vue'
import { checkTel } from '../libs/fn'

export default{
  components: {
    PubHeader
  },
  data() {
      return {
        loading: false,
        disabled: false,
        btn: '重置密码',
        codebtn: '发送验证码',
        formItem: {
          uid: this.$store.state.userInfo.uid,
          type: 'psw',
          phone: '',
          password: '',
          code: ''
        }
      }
  },
  methods: {
    sendCode() {
      if(!checkTel(this.formItem.phone)) {
        this.$vux.toast.text('手机号码格式不正确', 'middle')
        return false
      }
      this.disabled = true
      this.codebtn = '正在发送...'
      this.$http.post($config.host + '/api/Userbase/getMessage', qs.stringify({
        phone: this.formItem.phone,
        type: 3
      })).then((res) => {
        const {code, msg} = res.data
        if(code == 1) {
          let i = $config.sendCodeTimer
          let timer = setInterval(() => {
            i--
            this.codebtn = i+'s发送成功'
            if(i <= 0) {
              clearInterval(timer)
              this.disabled = false
              this.codebtn = '重新发送'
            }
          }, 1000)
        } else {
          this.disabled = false
          this.codebtn = '获取验证码'
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.disabled = false
        this.codebtn = '获取验证码'
        this.$vux.toast.text($config.errMsg, 'middle')
      })


    },
    handleReg() {
      if(!checkTel(this.formItem.phone)) {
        this.$vux.toast.text('手机号码格式不正确', 'middle')
        return false
      }
      if(this.formItem.code.length < 4) {
        this.$vux.toast.text('请填写4位验证码', 'middle')
        return false
      }
      if(this.formItem.password.length < 6 || this.formItem.password.length > 16) {
        this.$vux.toast.text('请填写6~16位密码', 'middle')
        return false
      }
      this.loading = true
      this.btn = '正在重置密码'
      this.$http.post($config.host + '/api/Userbase/forget', qs.stringify(this.formItem)).then((res) => {
        const {code, msg} = res.data
        if(code == 1){
          this.$vux.toast.text('密码重置成功', 'middle')
          this.$router.push('/logout')
        } else {
          this.loading = false
          this.btn = '重新重置密码'
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.loading = false
        this.btn = '重新重置密码'
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    }
  },
  beforeRouteLeave(to, from, next) {
    this.formItem = {
      type: 'psw',
      phone: '',
      password: '',
      code: ''
    }
    next()
  }
}
</script>
<style scoped>
  .reg{
    margin: 0.2rem;
    background: #fff;
    height: auto;
    box-shadow: 0px 0px 0.15rem rgba(0, 0, 0, 0.07);
  }
</style>
